<template>
  <div style="padding: 40px;">
    <Spin v-if="spinShow"  class="loadingDiv" size="large">
      <Icon type="ios-loading" size="40"/>
      <p style="font-size: 20px">加载中</p>
    </Spin>
    <div :id="id" v-else></div>
  </div>
</template>

<script>
import HighCharts from 'highcharts'
import exporting from 'highcharts/modules/exporting'
import sankey from 'highcharts/modules/sankey'
import oldie from 'highcharts/modules/oldie'
import organization from 'highcharts/modules/organization'

exporting(HighCharts)
sankey(HighCharts)
oldie(HighCharts)
organization(HighCharts)

export default {
  name: "HelloWorld",
  /*watch: {
    option () {
      HighCharts.chart(this.id,this.chartOptions);
    }
  },*/
  data() {
    return {
      id:'crownChart',
      chartData:[],
      spinShow:true
    };
  },
  mounted() {
    this.spinShow = true
    setTimeout(()=>{
      this.initData();
    },2000)
    this.spinShow  = false
  },
  methods: {
    initData(){
      const provinceCompare = this.$store.state.provinceCompare
      const xData = Object.keys(provinceCompare)
      const yData = Object.values(provinceCompare)
      const chartData = []
      const confirmAddObj = {name:'新增确诊',data:[]}
      const deadObj = {name:'死亡病例',data:[]}
      const healObj = {name:'治愈病例',data:[]}
      yData.forEach(item=>{
        confirmAddObj.data.push(item.confirmAdd)
        deadObj.data.push(item.dead)
        healObj.data.push(item.heal)
      })
      chartData.push(confirmAddObj,deadObj,healObj)
      const chartOptions = {
        title: {
          text:"全国"
        },
        subtitle: {
          text: "数据来源：api.inews.qq.com"
        },
        xAxis:{
          title: {
            text: "省份"
          },
          categories:xData
        },
        yAxis: {
          title: {
            text: "人数"
          },
        },
        legend: {
          layout: "vertical",
          align: "right",
          verticalAlign: "middle"
        },
        series: chartData,
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom"
                }
              }
            }
          ]
        }
      }
      HighCharts.chart(this.id, chartOptions)
    }
  }
};
</script>

<style>
.highcharts-container {
  width: 600px;
  height: 400px;
  border: 1px solid #ddd;
  margin: auto;
}
</style>
